<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 5.4.2">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"xiaoqingming18.github.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.15.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":false,"style":null},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>

    <meta name="description" content="JavaScript高级程序设计（红宝书）读书笔记📑第六章 集合引用类型[✒本章内容]   对象 数组与定型数组 Map、WeakMap、Set以及WeakSet类型  📃 6.1 ObjectObject是ECMAScript中最常用的类型之一。显式地创建Object的实例有两种方式。第一种是使用new操作符和Object构造函数，如下所示： 123let person &#x3D; new Obje">
<meta property="og:type" content="article">
<meta property="og:title" content="Javasript高级程序设计(红宝书)读书笔记">
<meta property="og:url" content="http://xiaoqingming18.github.io/2023/04/09/Javasript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="鸣蜩十七">
<meta property="og:description" content="JavaScript高级程序设计（红宝书）读书笔记📑第六章 集合引用类型[✒本章内容]   对象 数组与定型数组 Map、WeakMap、Set以及WeakSet类型  📃 6.1 ObjectObject是ECMAScript中最常用的类型之一。显式地创建Object的实例有两种方式。第一种是使用new操作符和Object构造函数，如下所示： 123let person &#x3D; new Obje">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://github.githubassets.com/images/icons/emoji/unicode/1f4d1.png?v8">
<meta property="og:image" content="https://github.githubassets.com/images/icons/emoji/unicode/2712.png?v8">
<meta property="og:image" content="https://github.githubassets.com/images/icons/emoji/unicode/1f4c3.png?v8">
<meta property="og:image" content="https://github.githubassets.com/images/icons/emoji/unicode/1f4c3.png?v8">
<meta property="og:image" content="https://github.githubassets.com/images/icons/emoji/unicode/1f4c3.png?v8">
<meta property="og:image" content="https://github.githubassets.com/images/icons/emoji/unicode/1f4c3.png?v8">
<meta property="og:image" content="https://github.githubassets.com/images/icons/emoji/unicode/1f4d1.png?v8">
<meta property="article:published_time" content="2023-04-09T15:02:22.000Z">
<meta property="article:modified_time" content="2023-04-12T13:28:31.689Z">
<meta property="article:author" content="鸣蜩十七">
<meta property="article:tag" content="-读书笔记 -JavaScript -前端">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://github.githubassets.com/images/icons/emoji/unicode/1f4d1.png?v8">


<link rel="canonical" href="http://xiaoqingming18.github.io/2023/04/09/Javasript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://xiaoqingming18.github.io/2023/04/09/Javasript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/","path":"2023/04/09/Javasript高级程序设计读书笔记/","title":"Javasript高级程序设计(红宝书)读书笔记"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Javasript高级程序设计(红宝书)读书笔记 | 鸣蜩十七</title>
  








  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>

<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">鸣蜩十七</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">鸣蜩十七是和女朋友谈恋爱的日子</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-schedule"><a href="/schedule/" rel="section"><i class="fa fa-calendar fa-fw"></i>日程表</a></li><li class="menu-item menu-item-sitemap"><a href="/sitemap.xml" rel="section"><i class="fa fa-sitemap fa-fw"></i>站点地图</a></li><li class="menu-item menu-item-commonweal"><a href="/404/" rel="section"><i class="fa fa-heartbeat fa-fw"></i>公益 404</a></li>
  </ul>
</nav>




</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#JavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%EF%BC%88%E7%BA%A2%E5%AE%9D%E4%B9%A6%EF%BC%89%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0"><span class="nav-text">JavaScript高级程序设计（红宝书）读书笔记</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#bookmark-tabs-%E7%AC%AC%E5%85%AD%E7%AB%A0-%E9%9B%86%E5%90%88%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B"><span class="nav-text">📑第六章 集合引用类型</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#page-with-curl-6-1-Object"><span class="nav-text">📃 6.1 Object</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#page-with-curl-6-2-Array"><span class="nav-text">📃6.2 Array</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84"><span class="nav-text">创建数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B1%BB%E6%95%B0%E7%BB%84%E7%BB%93%E6%9E%84%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%95%B0%E7%BB%84"><span class="nav-text">类数组结构转换为数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%95%B0%E7%BB%84%E7%A9%BA%E4%BD%8D"><span class="nav-text">数组空位</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%95%B0%E7%BB%84%E7%B4%A2%E5%BC%95"><span class="nav-text">数组索引</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A3%80%E6%B5%8B%E6%95%B0%E7%BB%84"><span class="nav-text">检测数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8%E6%96%B9%E6%B3%95"><span class="nav-text">迭代器方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A4%8D%E5%88%B6%E5%92%8C%E5%A1%AB%E5%85%85%E6%96%B9%E6%B3%95"><span class="nav-text">复制和填充方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#join%E6%96%B9%E6%B3%95"><span class="nav-text">join方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A0%88%E6%96%B9%E6%B3%95"><span class="nav-text">栈方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%98%9F%E5%88%97%E6%96%B9%E6%B3%95"><span class="nav-text">队列方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8E%92%E5%BA%8F%E6%96%B9%E6%B3%95"><span class="nav-text">排序方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95"><span class="nav-text">操作方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%AD%E4%BB%A3%E6%96%B9%E6%B3%95"><span class="nav-text">迭代方法</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-3-page-with-curl-%E5%AE%9A%E5%9E%8B%E6%95%B0%E7%BB%84"><span class="nav-text">6.3 📃定型数组</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-4-page-with-curl-Map"><span class="nav-text">6.4 📃Map</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%9F%BA%E6%9C%ACAPI"><span class="nav-text">基本API</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AC%AC%E5%85%AB%E7%AB%A0-%E5%AF%B9%E8%B1%A1%E3%80%81%E7%B1%BB%E4%B8%8E%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E5%8F%98%E6%88%90"><span class="nav-text">第八章 对象、类与面向对象变成</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#8-1-%E4%BD%BF%E7%94%A8%E5%AF%B9%E8%B1%A1%E5%AD%97%E9%9D%A2%E9%87%8F%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E5%AE%9E%E4%BE%8B"><span class="nav-text">8.1 使用对象字面量创建对象实例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-2-%E5%B1%9E%E6%80%A7%E7%9A%84%E7%B1%BB%E5%9E%8B"><span class="nav-text">8.2 属性的类型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%95%B0%E6%8D%AE%E5%B1%9E%E6%80%A7"><span class="nav-text">数据属性</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#bookmark-tabs-%E9%9B%B6%E6%95%A3%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="nav-text">📑零散知识点</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E6%9E%84"><span class="nav-text">解构</span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">鸣蜩十七</p>
  <div class="site-description" itemprop="description">记录我的学习、生活和恋爱日常</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">43</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">37</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://xiaoqingming18.github.io/2023/04/09/Javasript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="鸣蜩十七">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="鸣蜩十七">
      <meta itemprop="description" content="记录我的学习、生活和恋爱日常">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Javasript高级程序设计(红宝书)读书笔记 | 鸣蜩十七">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Javasript高级程序设计(红宝书)读书笔记
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2023-04-09 23:02:22" itemprop="dateCreated datePublished" datetime="2023-04-09T23:02:22+08:00">2023-04-09</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-04-12 21:28:31" itemprop="dateModified" datetime="2023-04-12T21:28:31+08:00">2023-04-12</time>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="JavaScript高级程序设计（红宝书）读书笔记"><a href="#JavaScript高级程序设计（红宝书）读书笔记" class="headerlink" title="JavaScript高级程序设计（红宝书）读书笔记"></a>JavaScript高级程序设计（红宝书）读书笔记</h1><h2 id="bookmark-tabs-第六章-集合引用类型"><a href="#bookmark-tabs-第六章-集合引用类型" class="headerlink" title=":bookmark_tabs:第六章 集合引用类型"></a><span class="github-emoji"><span>📑</span><img src="https://github.githubassets.com/images/icons/emoji/unicode/1f4d1.png?v8" aria-hidden="true" onerror="this.parent.classList.add('github-emoji-fallback')"></span>第六章 集合引用类型</h2><p>[<span class="github-emoji"><span>✒</span><img src="https://github.githubassets.com/images/icons/emoji/unicode/2712.png?v8" aria-hidden="true" onerror="this.parent.classList.add('github-emoji-fallback')"></span>本章内容] </p>
<ol>
<li>对象</li>
<li>数组与定型数组</li>
<li><code>Map</code>、<code>WeakMap</code>、<code>Set</code>以及<code>WeakSet</code>类型</li>
</ol>
<h3 id="page-with-curl-6-1-Object"><a href="#page-with-curl-6-1-Object" class="headerlink" title=":page_with_curl: 6.1 Object"></a><span class="github-emoji"><span>📃</span><img src="https://github.githubassets.com/images/icons/emoji/unicode/1f4c3.png?v8" aria-hidden="true" onerror="this.parent.classList.add('github-emoji-fallback')"></span> 6.1 Object</h3><p><code>Object</code>是<code>ECMAScript</code>中最常用的类型之一。显式地创建<code>Object</code>的实例有两种方式。第一种是使用<code>new</code>操作符和<code>Object</code>构造函数，如下所示：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">person.<span class="property">name</span> = <span class="string">"Nicholas"</span>;</span><br><span class="line">person.<span class="property">age</span> = <span class="number">28</span>;</span><br></pre></td></tr></tbody></table></figure>
<p>另一种方式是使用<strong>对象字面量</strong>表示法。对象字面量是对象定义的简写形式，定义方式如下：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = {</span><br><span class="line">    <span class="attr">name</span>: <span class="string">"Nicholas"</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">28</span></span><br><span class="line">};</span><br><span class="line"><span class="comment">// 属性之间用逗号隔开，最后一个属性后面没有逗号</span></span><br></pre></td></tr></tbody></table></figure>
<p>在对象字面量表示法中，<font color="#dd0000">属性名可以是字符串或数值，</font>比如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = {</span><br><span class="line">    <span class="string">"name"</span>: <span class="string">"Nicholas"</span>,</span><br><span class="line">    <span class="string">"age"</span>: <span class="number">28</span></span><br><span class="line">    <span class="number">5</span>: <span class="literal">true</span></span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure>
<p>要注意的是，<font color="#dd0000">数值属性会自动转换为字符串。</font></p>
<p>对象字面量也成为了给函数传递大量可选参数的主要方式，如下：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">displayInfo</span>(<span class="params">args</span>) {</span><br><span class="line">    <span class="keyword">let</span> output = <span class="string">""</span>;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> args.<span class="property">name</span> == <span class="string">"string"</span>) {</span><br><span class="line">        output += <span class="string">"Name: "</span> + args.<span class="property">name</span> + <span class="string">"\n"</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> args.<span class="property">age</span> == <span class="string">"number"</span>) {</span><br><span class="line">        output += <span class="string">"Age: "</span> + args.<span class="property">age</span> + <span class="string">"\n"</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="title function_">alert</span>(output);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="title function_">displayInfo</span>(</span><br><span class="line">    <span class="attr">name</span>: <span class="string">"Nicholas"</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">28</span></span><br><span class="line">);</span><br><span class="line"><span class="title function_">displayInfo</span>(</span><br><span class="line">    <span class="attr">name</span>: <span class="string">"Gerg"</span></span><br><span class="line">);</span><br></pre></td></tr></tbody></table></figure>
<p>对象的属性一般用<strong>点语法</strong>来存取，但也可以使用中括号来存取属性，在使用中括号存取属性时，要在括号内使用属性名的字符串形式，比如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person[<span class="string">"name"</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person[<span class="string">"age"</span>]);</span><br></pre></td></tr></tbody></table></figure>
<p>从功能上看，<font color="#006600">两种存取方式没有任何区别，</font><font color="#dd0000">使用中括号存取属性的优势是可以通过变量访问属性，</font>看下面的例子：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> propertyName = <span class="string">"name"</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(person[propertyName]); <span class="comment">// "Nicholas"</span></span><br></pre></td></tr></tbody></table></figure>
<p>总结一下，<font color="#dd0000">点语法是首选的属性存取方式，</font>除非访问属性时必须使用变量。</p>
<h3 id="page-with-curl-6-2-Array"><a href="#page-with-curl-6-2-Array" class="headerlink" title=":page_with_curl:6.2 Array"></a><span class="github-emoji"><span>📃</span><img src="https://github.githubassets.com/images/icons/emoji/unicode/1f4c3.png?v8" aria-hidden="true" onerror="this.parent.classList.add('github-emoji-fallback')"></span>6.2 Array</h3><p>除了<code>Object</code>，<code>Array</code>是<code>ECMAScript</code>中最常用的类型了，<code>ECMAScript</code>数组与其他语言的数组最大不得不同是，<font color="#dd0000"><code>ECMAScript</code>数组每个槽位可以存储不同类型的数据，且数组是动态大小的，会随着数据添加自动增长。</font></p>
<h4 id="创建数组"><a href="#创建数组" class="headerlink" title="创建数组"></a>创建数组</h4><p>有几种基本的方式可以创建数组，一种是使用Array构造函数：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = <span class="keyword">new</span> <span class="title class_">Array</span>();</span><br></pre></td></tr></tbody></table></figure>
<p>还可以给构造函数传一个数值，用来设定数组初始大小：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">20</span>); <span class="comment">// 创建一个初始length为20的color数组</span></span><br></pre></td></tr></tbody></table></figure>
<p>还可以给构造函数传入要保存的元素：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="string">"red"</span>,<span class="string">"blue"</span>,<span class="string">"green"</span>);</span><br></pre></td></tr></tbody></table></figure>
<font color="#dd0000">在使用`构造函数`时，可以省略`new`操作符。</font>

<p>另一种创建数组的方式是使用<strong>数组字面量</strong>表示法：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = [<span class="string">"red"</span>,<span class="string">"blue"</span>,<span class="string">"green"</span>]; <span class="comment">// 创建一个包含3个元素的数组</span></span><br><span class="line"><span class="keyword">let</span> names = []; <span class="comment">// 创建一个空数组</span></span><br><span class="line"><span class="keyword">let</span> values = [<span class="number">1</span>,<span class="number">2</span>,]; <span class="comment">// 创建一个包含2个元素的数组</span></span><br></pre></td></tr></tbody></table></figure>
<h4 id="类数组结构转换为数组"><a href="#类数组结构转换为数组" class="headerlink" title="类数组结构转换为数组"></a>类数组结构转换为数组</h4><p><code>Array</code>构造函数有两个<code>ES6</code>新增的用于创建数组的静态方法：<code>from()</code>和<code>of()</code>。</p>
<p><code>from()</code>用于将类数组结构转换为数组实例，而<code>of()</code>用于将一组参数转换为数组实例。下面我们分别讲解下两个方法的用法。</p>
<p>首先来看<code>from()</code>，<code>Array.from()</code>的第一个参数是一个类数组对象，即任何可迭代的结构：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串会被拆分为单字符数组</span></span><br><span class="line">consoloe.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="string">"吴君丽"</span>)); <span class="comment">// ["吴","君","丽"]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//对现有数组进行浅复制</span></span><br><span class="line"><span class="keyword">const</span> a1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line"><span class="keyword">const</span> a2 = <span class="title class_">Array</span>.<span class="title function_">from</span>(a1);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a2); <span class="comment">// [1,2,3,4]</span></span><br><span class="line"><span class="title function_">alert</span>(a1 == a1); <span class="comment">// false</span></span><br></pre></td></tr></tbody></table></figure>
<p>要注意的是，<font color="#dd0000">利用<code>from()</code>进行浅复制的数组和原数组是不相等的。</font></p>
<p><code>Array.from()</code>好接受第二个可选的映射函数参数，用来改变新数组的值；还可以接收第三个可选的参数，用于指定映射函数中<code>this</code>的值。但这个重写的<code>this</code>值在箭头函数中不适用：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line"><span class="keyword">const</span> a2 = <span class="title class_">Array</span>.<span class="title function_">from</span>(a1,x -&gt; x**<span class="number">2</span>);</span><br><span class="line">conse a3 = <span class="title class_">Array</span>.<span class="title function_">from</span>(a1,<span class="keyword">function</span>(<span class="params">x</span>) {<span class="keyword">return</span> x**<span class="variable language_">this</span>.<span class="property">exponent</span>},{<span class="attr">exponment</span>: <span class="number">2</span>});</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a2); <span class="comment">// [1,4,9,16]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a3); <span class="comment">// [1,4,9,16]</span></span><br></pre></td></tr></tbody></table></figure>
<p>最后来看<code>Array.of()</code>，这个方法可以把一组参数转换为数组：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">of</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>)); <span class="comment">// [1,2,3,4]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">of</span>(<span class="literal">undefined</span>)); <span class="comment">// [undefined]</span></span><br></pre></td></tr></tbody></table></figure>
<h4 id="数组空位"><a href="#数组空位" class="headerlink" title="数组空位"></a>数组空位</h4><p>使用数组字面量初始化数组时，可以使用一串逗号来创建空位。<code>ECMAScript</code>会将逗号之间相应索引位置的值当成空位，可以像下面这样创建一个空位数组：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> options = [,,,,,]; <span class="comment">//创建包含5个元素的数组</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(options.<span class="property">length</span>); <span class="comment">// 5</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(options) <span class="comment">// [,,,,,]</span></span><br></pre></td></tr></tbody></table></figure>
<font color="#dd0000">在`ES6`中将这些空位当成存在的元素，只不过值为`undefined`。</font>

<h4 id="数组索引"><a href="#数组索引" class="headerlink" title="数组索引"></a>数组索引</h4><p>如果把一个值设置给超过数组最大索引的位置，则数组会自动扩展到该索引值加1。</p>
<p>数组的<code>length</code>数值不是只读的，通过修改<code>length</code>属性，可以从数组末尾删除或添加元素：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = [<span class="string">"red"</span>,<span class="string">"blue"</span>,<span class="string">"green"</span>];</span><br><span class="line">colors.<span class="property">length</span> = <span class="number">2</span>;</span><br><span class="line"><span class="title function_">alert</span>(colors[<span class="number">2</span>]) <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> names = [<span class="string">"小清明"</span>，<span class="string">"吴君丽"</span>,<span class="string">"吴大孬"</span>];</span><br><span class="line">names.<span class="property">length</span> = <span class="number">4</span>;</span><br><span class="line"><span class="title function_">alert</span>(names[<span class="number">3</span>]); <span class="comment">// undefined</span></span><br></pre></td></tr></tbody></table></figure>
<p>使用<code>length</code>属性可以方便的从数组末尾添加元素：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colorss = [<span class="string">"red"</span>,<span class="string">"blue"</span>,<span class="string">"green"</span>];</span><br><span class="line">colors[colors.<span class="property">length</span>] = <span class="string">"black"</span></span><br><span class="line">colors[colors.<span class="property">length</span>] = <span class="string">"brown"</span>;</span><br></pre></td></tr></tbody></table></figure>
<p><code>length</code>属性始终会被更新为位置上加上1：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = [<span class="string">"red"</span>,<span class="string">"blue"</span>,<span class="string">"green"</span>];</span><br><span class="line">colors[<span class="number">99</span>] = <span class="string">"black"</span>;</span><br><span class="line"><span class="title function_">alert</span>(colors.<span class="property">length</span>); <span class="comment">// 100</span></span><br></pre></td></tr></tbody></table></figure>
<p>上面的代码中，<code>colors</code>数组有一个值被插入到位置99，结果<code>length</code>属性被更新为100（99+1），中间所有元素实际上并不存在，所以被访问时会返回<code>undefined</code>。</p>
<h4 id="检测数组"><a href="#检测数组" class="headerlink" title="检测数组"></a>检测数组</h4><p><code>Array.isArray()</code>方法可以确定一个值是否是数组：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="title class_">Array</span>.<span class="title function_">isArray</span>(value)) {</span><br><span class="line">    <span class="comment">//操作数组</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<h4 id="迭代器方法"><a href="#迭代器方法" class="headerlink" title="迭代器方法"></a>迭代器方法</h4><p>在ES6中，<code>Array</code>的原型上暴露了三个用于检索数组内容的方法：<code>keys()</code>、<code>values()</code>、<code>entries()</code>。</p>
<p><code>keys()</code>返回数组索引的迭代器，<code>values()</code>返回数组元素的迭代器，<code>entries()</code>返回数组索引/值对的迭代器：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = {<span class="string">"foo"</span>,<span class="string">"bar"</span>,<span class="string">"baz"</span>,<span class="string">"qux"</span>};</span><br><span class="line"><span class="comment">// 因为这些方法都返回迭代器，所以可以将它们的内容</span></span><br><span class="line"><span class="comment">// 通过Array.from()方法直接转换为数组实例</span></span><br><span class="line"><span class="keyword">const</span> aKeys = <span class="title class_">Array</span>.<span class="title function_">from</span>(a.<span class="title function_">keys</span>()); <span class="comment">// [0,1,2,3]</span></span><br><span class="line"><span class="keyword">const</span> aValues = <span class="title class_">Array</span>.<span class="title function_">from</span>(a.<span class="title function_">values</span>()); <span class="comment">// ["foo","bar","baz","qux"]</span></span><br><span class="line"><span class="keyword">const</span> aEntries = <span class="title class_">Array</span>.<span class="title function_">from</span>(a.<span class="title function_">entries</span>()); <span class="comment">// [[0,"foo"],[1,"bar"],[2,"baz"],[3,"qux"]]</span></span><br></pre></td></tr></tbody></table></figure>
<p>ES6的结构可以拆分键值对：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = {<span class="string">"foo"</span>,<span class="string">"bar"</span>,<span class="string">"baz"</span>,<span class="string">"qux"</span>};</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">const</span> [idx,element] <span class="keyword">of</span> a.<span class="title function_">entries</span>()) {</span><br><span class="line">    <span class="title function_">alert</span>(idx);</span><br><span class="line">    <span class="title function_">alert</span>(element);</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 0</span></span><br><span class="line"><span class="comment">//foo</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// bar</span></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="comment">// baz</span></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="comment">// qux</span></span><br></pre></td></tr></tbody></table></figure>
<h4 id="复制和填充方法"><a href="#复制和填充方法" class="headerlink" title="复制和填充方法"></a>复制和填充方法</h4><p>ES6新增了两个方法：批量复制方法<code>copyWithin()</code>和填充数组方法<code>fill()</code>.</p>
<p><code>fill()</code>方法接受三个参数，第一个参数用于指定要填充的元素，第二个参数是开始索引，第三个参数是结束索引，后面两个参数都是可选的。填充的范围是：<font color="#dd0000">[开始索引，结束索引)，也即填充范围包括开始索引不包括结束索引。</font></p>
<ol>
<li>当开始索引和结束索引都缺省时，数组所有元素都填充为给定的值；</li>
<li>当只有开始索引时，数组从开始索引填充到最后一个元素为止；</li>
<li>当开始索引和结束索引都具有时，数组填充指定元素从开始索引到结束索引的前一个元素为止。</li>
</ol>
<p>特殊情况（索引为负值，索引超出边界、反向索引）查阅P144。</p>
<h4 id="join方法"><a href="#join方法" class="headerlink" title="join方法"></a>join方法</h4><p><code>join()</code>方法接受一个参数，即字符分隔符，返回包含所有项的字符串：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = {<span class="string">"red"</span>,<span class="string">"green"</span>,<span class="string">"blue"</span>};</span><br><span class="line"><span class="title function_">alert</span>(colors.<span class="title function_">join</span>(<span class="string">"-"</span>)); <span class="comment">// red-green-blue</span></span><br></pre></td></tr></tbody></table></figure>
<h4 id="栈方法"><a href="#栈方法" class="headerlink" title="栈方法"></a>栈方法</h4><p><code>ECMAScrip</code>数组提供了<code>push()</code>和<code>pop()</code>方法，用来实现栈的行为。</p>
<ol>
<li><code>push()</code>方法接受任意数量的参数，并将它们添加到数组末尾，返回数组的新长度；</li>
<li><code>pop()</code>方法删除数组最后一项，并返回被删除的项。</li>
</ol>
<font color="#dd0000">栈方法可以与数组的其他方法一起使用。</font>

<h4 id="队列方法"><a href="#队列方法" class="headerlink" title="队列方法"></a>队列方法</h4><p><code>shift()</code>方法删除数组第一项并返回该项，然后让数组长度减一。使用<code>push()</code>和<code>shift()</code>可以把数组当做队列来使用。</p>
<p><code>ECMAScript</code>也为数组提供了<code>unshift()</code>方法，在数组开头添加任意多个值并返回数组新长度。通过使用<code>unshift()</code>和<code>pop()</code>可以在相反的方向上使用队列。</p>
<h4 id="排序方法"><a href="#排序方法" class="headerlink" title="排序方法"></a>排序方法</h4><p><code>reverse()</code>方法用于将数组反向排列。</p>
<p><code>sort()</code>方法在默认情况下会按照升序排列数组元素，但默认的<code>sort()</code>方法把数组每个元素转换成字符串再决定顺序，这显然不适合用于数值或其他类型的数组排序工作。</p>
<p>为了解决这个问题，<code>sort()</code>方法可以接受一个<strong>比较函数</strong>，用于判断哪个值应该在前面。</p>
<p>比较函数接受两个参数，如果第一个参数应该排在第二个参数前面，则返回负值；如果第一个参数应该排在第二个参数后面，则返回正值；如果两个参数相等就返回0。来看下面使用比较函数调用<code>sort()</code>的例子：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> values = {<span class="number">0</span>,<span class="number">5</span>,<span class="number">1</span>,<span class="number">10</span>,<span class="number">15</span>};</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">compare</span>(<span class="params">value1,value2</span>) {</span><br><span class="line">    <span class="keyword">if</span>(value1 &lt; value2)</span><br><span class="line">        <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">if</span>(value1 &gt; value2)</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line">values.<span class="title function_">sort</span>(compare);</span><br><span class="line"><span class="title function_">alert</span>(values); <span class="comment">// 0,1,5,10,15</span></span><br></pre></td></tr></tbody></table></figure>
<p>这个比较函数可以进一步简写成箭头函数：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> values = {<span class="number">0</span>,<span class="number">1</span>,<span class="number">5</span>,<span class="number">10</span>,<span class="number">15</span>};</span><br><span class="line">values.<span class="title function_">sort</span>(<span class="function">(<span class="params">a,b</span>) =&gt;</span> a &lt; b ? -<span class="number">1</span> : a &gt; b ? <span class="number">1</span> : <span class="number">0</span>);</span><br><span class="line">alert (values); <span class="comment">// 0,1,5,10,15</span></span><br></pre></td></tr></tbody></table></figure>
<h4 id="操作方法"><a href="#操作方法" class="headerlink" title="操作方法"></a>操作方法</h4><p>对于数组中元素有很多操作方法。比如<code>concat()</code>方法接收一个参数，首先创建一个数组副本，并将参数全部添加到数组末尾，若接受的参数是数组，则将参数数组中每一项添加到副本数组的末尾。</p>
<h4 id="迭代方法"><a href="#迭代方法" class="headerlink" title="迭代方法"></a>迭代方法</h4><p><code>ECMAScript</code>为数组定义了5个迭代方法，每个迭代方法接受两个参数：对数组每一项运行的函数，可选的作为函数运行上下文的作用域对象。传给每个方法的函数接受三个参数：数组元素、元素索引和数组本身。</p>
<p>下面是五个迭代方法的介绍：</p>
<ol>
<li><code>every()</code>：对数组每一项都运行传入的函数，如果每一项函数都返回<code>true</code>，则这个方法返回<code>true</code>；</li>
<li><code>some()</code>：对数组的每一项都运行传入的函数，只要有一项函数返回<code>true</code>，则这个方法返回<code>true</code>；</li>
<li><code>filter()</code>：对数组的每一项都运行传入的函数，函数返回<code>true</code>的项组成数组后返回；</li>
<li><code>map()</code>：对数组的每一项都运行传入的函数，返回每一项函数调用的结果构成的数组；</li>
<li><code>forEach()</code>：对数组的每一项都运行传入的函数，没有返回值。</li>
</ol>
<p><font color="#dd0000">这些方法都不改变原数组。</font>看下面的例子：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> numbers = {<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">4</span>,<span class="number">3</span>,<span class="number">2</span>,<span class="number">1</span>};</span><br><span class="line"><span class="keyword">let</span> everyResult = numbers.<span class="title function_">every</span>(<span class="function">(<span class="params">item,index,array</span>) =&gt;</span> item &gt; <span class="number">2</span>);</span><br><span class="line"><span class="title function_">alert</span>(everyResult); <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> someResult = numbers.<span class="title function_">some</span>(<span class="function">(<span class="params">item,index,array</span>) =&gt;</span> item &gt; <span class="number">2</span>);</span><br><span class="line"><span class="title function_">alert</span>(someResult); <span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> filterResult = numbers.<span class="title function_">filter</span>(<span class="function">(<span class="params">item,index,array</span>) =&gt;</span> item &gt; <span class="number">2</span>);</span><br><span class="line"><span class="title function_">alert</span>(filterResult); <span class="comment">// [3,4,5,4,3]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> mapResult = numbers.<span class="title function_">map</span>(<span class="function">(<span class="params">item,index,array</span>) =&gt;</span> item * <span class="number">2</span>);</span><br><span class="line"><span class="title function_">alert</span>(mapResult); <span class="comment">// [2,4,6,8,10,8,6,4,2]</span></span><br><span class="line"></span><br><span class="line">numbers.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item,index,array</span>) =&gt;</span> item *<span class="number">2</span>);</span><br><span class="line"><span class="title function_">alert</span>(numbers); <span class="comment">// [2,4,6,8,10,8,6,4,2]</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="6-3-page-with-curl-定型数组"><a href="#6-3-page-with-curl-定型数组" class="headerlink" title="6.3 :page_with_curl:定型数组"></a>6.3 <span class="github-emoji"><span>📃</span><img src="https://github.githubassets.com/images/icons/emoji/unicode/1f4c3.png?v8" aria-hidden="true" onerror="this.parent.classList.add('github-emoji-fallback')"></span>定型数组</h3><p>待学习</p>
<h3 id="6-4-page-with-curl-Map"><a href="#6-4-page-with-curl-Map" class="headerlink" title="6.4 :page_with_curl:Map"></a>6.4 <span class="github-emoji"><span>📃</span><img src="https://github.githubassets.com/images/icons/emoji/unicode/1f4c3.png?v8" aria-hidden="true" onerror="this.parent.classList.add('github-emoji-fallback')"></span>Map</h3><p><code>Map</code>是ES6中新增的一种集合类型，为JS带来了真正的键/值存储机制。</p>
<h4 id="基本API"><a href="#基本API" class="headerlink" title="基本API"></a>基本API</h4><p>使用<code>new</code>关键字和<code>Map</code>构造器创建一个空映射:</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> m = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br></pre></td></tr></tbody></table></figure>
<p>可以在创建的同时初始化实例，给<code>Map</code>构造函数传入一个可迭代对象，需要包含键值对数组，可迭代对象中的每个键值对都会按照迭代顺序插入到新映射实例中：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> m1 = <span class="keyword">new</span> <span class="title class_">Map</span>([</span><br><span class="line">    [<span class="string">"key1"</span>,<span class="string">"val1"</span>],</span><br><span class="line">    [<span class="string">"key2"</span>.<span class="string">"val2"</span>]</span><br><span class="line">]);</span><br><span class="line"><span class="title function_">alert</span>(m1.<span class="property">size</span>); <span class="comment">// 2</span></span><br></pre></td></tr></tbody></table></figure>
<p>初始化之后可以使用<code>set()</code>方法添加键值对，使用<code>get()</code>和<code>has()</code>方法获取键值、检测某个键值对是否存在，还可以使用<code>delete()</code>和<code>clear()</code>删除值,最后可以使用<code>size()</code>方法获取键值对数量：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> m = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line"><span class="title function_">alert</span>(m.<span class="title function_">has</span>(<span class="string">"firstName"</span>)); <span class="comment">// false</span></span><br><span class="line"><span class="title function_">alert</span>(m.<span class="title function_">get</span>(<span class="string">"firstName"</span>)); <span class="comment">// undefined</span></span><br><span class="line"><span class="title function_">alert</span>(m.<span class="property">size</span>); <span class="comment">// 0</span></span><br><span class="line"></span><br><span class="line">m.<span class="title function_">set</span>(<span class="string">"firstName"</span>,<span class="string">"Matt"</span>)</span><br><span class="line"> .<span class="title function_">set</span>(<span class="string">"lastName"</span>,<span class="string">"Frisbie"</span>);</span><br><span class="line"><span class="title function_">alert</span>(m.<span class="title function_">has</span>(<span class="string">"firstName"</span>)); <span class="comment">// true</span></span><br><span class="line"><span class="title function_">alert</span>(m.<span class="title function_">get</span>(<span class="string">"firstName"</span>)); <span class="comment">// Matt</span></span><br><span class="line"><span class="title function_">alert</span>(m.<span class="property">size</span>); <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line">m.<span class="title function_">delete</span>(<span class="string">"firstName"</span>); <span class="comment">//删除这一个键值对</span></span><br><span class="line"><span class="title function_">alert</span>(m.<span class="title function_">has</span>(<span class="string">"firstName"</span>)); <span class="comment">// false</span></span><br><span class="line"><span class="title function_">alert</span>(m.<span class="title function_">get</span>(<span class="string">"firstName"</span>)); <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line">m.<span class="title function_">clear</span>() <span class="comment">// 删除所有键值对</span></span><br><span class="line"><span class="title function_">alert</span>(m.<span class="property">size</span>); <span class="comment">// 0</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>Map</code>可以使用任何JavaScript数据类型为键，</p>
<h2 id="第八章-对象、类与面向对象变成"><a href="#第八章-对象、类与面向对象变成" class="headerlink" title="第八章 对象、类与面向对象变成"></a>第八章 对象、类与面向对象变成</h2><h3 id="8-1-使用对象字面量创建对象实例"><a href="#8-1-使用对象字面量创建对象实例" class="headerlink" title="8.1 使用对象字面量创建对象实例"></a>8.1 使用对象字面量创建对象实例</h3><figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = {</span><br><span class="line">    <span class="attr">name</span>: <span class="string">"吴大孬"</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">job</span>: {</span><br><span class="line">        <span class="attr">jpbName</span>: <span class="string">"牙医"</span>,</span><br><span class="line">        <span class="attr">salary</span>: <span class="number">20000</span></span><br><span class="line">    }</span><br><span class="line">    <span class="title function_">sayLove</span>(<span class="params"></span>) {</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"我爱詹向飞！"</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<h3 id="8-2-属性的类型"><a href="#8-2-属性的类型" class="headerlink" title="8.2 属性的类型"></a>8.2 属性的类型</h3><p><code>ECMAScript</code>把对象属性分两种：<strong>数据属性</strong>和<strong>访问器属性</strong>。并且使用一些内部特征用来描述属性。</p>
<h4 id="数据属性"><a href="#数据属性" class="headerlink" title="数据属性"></a>数据属性</h4><p>JavaScript中对象的数据属性的值保存在属性的一个特征属性中，数据属性一共有以下四个特征属性：</p>
<ol>
<li><code>[[Configurable]]</code>：表示属性是否可以通过<code>delete</code>删除并重新定义，是否可以修改它的特性</li>
</ol>
<h2 id="bookmark-tabs-零散知识点"><a href="#bookmark-tabs-零散知识点" class="headerlink" title=":bookmark_tabs:零散知识点"></a><span class="github-emoji"><span>📑</span><img src="https://github.githubassets.com/images/icons/emoji/unicode/1f4d1.png?v8" aria-hidden="true" onerror="this.parent.classList.add('github-emoji-fallback')"></span>零散知识点</h2><h3 id="解构"><a href="#解构" class="headerlink" title="解构"></a>解构</h3>
    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0-JavaScript-%E5%89%8D%E7%AB%AF/" rel="tag"># -读书笔记 -JavaScript -前端</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2023/04/05/JAVA%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%E5%8D%B7I-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" rel="prev" title="JAVA核心技术卷I-读书笔记">
                  <i class="fa fa-chevron-left"></i> JAVA核心技术卷I-读书笔记
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2023/04/23/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%8E%9F%E7%90%86%EF%BC%9ASQL/" rel="next" title="SQL笔记">
                  SQL笔记 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">鸣蜩十七</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  




  




  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="/js/third-party/math/mathjax.js"></script>



</body>
</html>
